<template>
  <div id="app">
    <Layout>
      <Header>
        <div class="layui-logo">LAYVUE</div>
        <Navbar class="layui-layout-left">
          <NavbarItem>控制台</NavbarItem>
          <NavbarItem>商品管理<Badge type="dot" /></NavbarItem>
          <NavbarItem>用户<Badge bg="orange">9</Badge></NavbarItem>
          <SubNavbar>
            <template slot="title">
              <Icon type="envelope-open" /> 
              其它系统
            </template>
            <SubNavbarItem><Icon type="wechat" /> 邮件管理</SubNavbarItem>
            <SubNavbarItem>消息管理</SubNavbarItem>
            <SubNavbarItem>授权管理</SubNavbarItem>
          </SubNavbar>
        </Navbar>
        <Navbar class="layui-layout-right">
          <NavbarItem unselected><Icon type="bell" /><Badge type="dot" :style="{margin:'-8px 0 0'}"/></NavbarItem>
          <NavbarItem unselected><Icon type="tachometer" /></NavbarItem>
          <NavbarItem unselected><Icon type="tags" /></NavbarItem>
          <SubNavbar>
            <template slot="title">              
              <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
              Van
            </template>
            <SubNavbarItem>基本资料</SubNavbarItem>
            <SubNavbarItem>安全设置</SubNavbarItem>
            <SubNavbarItem><Icon type="power-off"/> 注销</SubNavbarItem>
          </SubNavbar>
          <NavbarItem unselected><Icon type="sliders" /></NavbarItem>
        </Navbar>
      </Header>
      <Silder>
        <Navbar type="tree" sided :style="{top:'50px'}">
          <NavbarItem>首页</NavbarItem>
          <NavbarItem>国际新闻</NavbarItem>
          <NavbarItem>亚太地区<Badge bg="orange">9</Badge></NavbarItem>
          <NavbarItem>正文<Badge type="dot" /></NavbarItem>
          <SubNavbar>
            <template slot="title">
              <Icon type="envelope-open" /> 
              SubNavbar
            </template>
            <SubNavbarItem><Icon type="wechat" /> SubNavbarItem1</SubNavbarItem>
            <SubNavbarItem>SubNavbarItem2</SubNavbarItem>
            <SubNavbarItem>SubNavbarItem3</SubNavbarItem>
            <SubNavbarItem>SubNavbarItem4</SubNavbarItem>
          </SubNavbar>
        </Navbar>
      </Silder>
      <Content>
        <Card style="margin-bottom:0;">
          <CardBody>
            <Breadcrumb>
                  <BreadcrumbItem>首页</BreadcrumbItem>
                  <BreadcrumbItem>国际新闻</BreadcrumbItem>
                  <BreadcrumbItem>亚太地区</BreadcrumbItem>
                  <BreadcrumbItem>正文</BreadcrumbItem>
                </Breadcrumb>
          </CardBody>
        </Card>
        <div class="layui-fluid" :style="{padding:'15px'}">
        <Card>
          <CardHeader>按钮/按钮组</CardHeader>
          <CardBody>
            <Button type="primary" @click="onClick" icon="wechat" disabled radius>Wechat</Button>
            <Button icon="wechat">Wechat</Button>
            <Button type="normal" icon="wechat">Wechat</Button>
            <Button type="warm" icon="wechat">Wechat</Button>
            <Button type="danger" icon="wechat">Wechat</Button>
            <Button icon="wechat" disabled>Wechat</Button>
            <ButtonGroup>
              <Button @click="onClick" icon="wechat">Wechat</Button>
              <Button @click="onClick" icon="wechat"/>
            </ButtonGroup>
          </CardBody>
        </Card>
        <Card>
          <CardHeader>进度条</CardHeader>
          <CardBody>
            <Progress :percent="progressValue+'%'" filter="p1" />
            <br/>
            <Progress :percent="progressValue+'%'" filter="p2" showPercent skin="green" />
            <br/>
            <Progress :percent="progressValue+'%'" filter="p3" showPercent skin="cyan" big />
          </CardBody>
        </Card>
        <Card>
          <CardHeader>Collapse</CardHeader>
          <CardBody>
            <Collapse>
              <CollapseItem>
                <span slot="title">杜甫</span>
                <p slot="content">内容区域</p>
              </CollapseItem>
              <CollapseItem>
                <span slot="title">李清照</span>
                <p slot="content">内容区域</p>
              </CollapseItem>
            </Collapse>
          </CardBody>
        </Card>
        <Card>
          <CardHeader>表单</CardHeader>
          <CardBody>
            <Input required verify="required|phone|number" />
            <Select filter="xx">
              <Option value="010">北京</Option>
              <Option value="011">上海</Option>
              <Option value="020" disabled>广州</Option>
              <Option value="0759">深圳</Option>
            </Select>
          </CardBody>
        </Card>
        <Card>
          <CardHeader>轮播</CardHeader>
          <CardBody>
            <Carousel filter="carousel1" width="100%">
              <div class="layui-bg-green">条目1</div>
              <div class="layui-bg-orange">条目2</div>
              <div class="layui-bg-red">条目3</div>
              <div class="layui-bg-cyan">条目4</div>
              <div class="layui-bg-black">条目5</div>
            </Carousel>
          </CardBody>
        </Card>
          <Row :space="10">
            <Colx :md="8">
              <Row :space="10">
                <Colx :md="6">
                  <Card>
                    <CardHeader>快捷方式</CardHeader>
                    <CardBody>
                      <Row :space="8">
                        <Colx :xs="3">
                          <div :style="{height:'60px'}" class="layui-bg-green"></div>
                        </Colx>
                        <Colx :xs="3">
                          <div :style="{height:'60px'}" class="layui-bg-green"></div>
                        </Colx>
                        <Colx :xs="3">
                          <div :style="{height:'60px'}" class="layui-bg-green"></div>
                        </Colx>
                        <Colx :xs="3">
                          <div :style="{height:'60px'}" class="layui-bg-green"></div>
                        </Colx>
                      </Row>
                      <Row :space="8">
                        <Colx :xs="3">
                          <div :style="{height:'60px'}" class="layui-bg-green"></div>
                        </Colx>
                        <Colx :xs="3">
                          <div :style="{height:'60px'}" class="layui-bg-green"></div>
                        </Colx>
                        <Colx :xs="3">
                          <div :style="{height:'60px'}" class="layui-bg-green"></div>
                        </Colx>
                        <Colx :xs="3">
                          <div :style="{height:'60px'}" class="layui-bg-green"></div>
                        </Colx>
                      </Row>
                    </CardBody>
                  </Card>
                </Colx>
                <Colx :md="6">
                  <Card>
                    <CardHeader>代办事项</CardHeader>
                    <CardBody>
                      <Row :space="8">
                        <Colx :xs="4">
                          <div :style="{height:'60px'}" class="layui-bg-green"></div>
                        </Colx>
                        <Colx :xs="4">
                          <div :style="{height:'60px'}" class="layui-bg-green"></div>
                        </Colx>
                        <Colx :xs="4">
                          <div :style="{height:'60px'}" class="layui-bg-green"></div>
                        </Colx>
                      </Row>
                      <Row :space="8">
                        <Colx :xs="4">
                          <div :style="{height:'60px'}" class="layui-bg-green"></div>
                        </Colx>
                        <Colx :xs="4">
                          <div :style="{height:'60px'}" class="layui-bg-green"></div>
                        </Colx>
                        <Colx :xs="4">
                          <div :style="{height:'60px'}" class="layui-bg-green"></div>
                        </Colx>
                      </Row>
                    </CardBody>
                  </Card>
                </Colx>
                <Colx :md="12">
                  <Card>
                    <CardBody>
                      <Tabs type="brief">
                        <TabTitle>
                          <TabTitleItem>xxx</TabTitleItem>
                          <TabTitleItem selected>ccc</TabTitleItem>
                        </TabTitle>
                        <TabContent>
                          <TabContentItem>hhhh</TabContentItem>
                          <TabContentItem selected>qqqq</TabContentItem>
                        </TabContent>
                      </Tabs>
                    </CardBody>
                  </Card>
                </Colx>
                <Colx :md="12">
                  <Card>
                    <CardBody>
                      <Table :columns="tableColumns" :data="tableDatas" />
                    </CardBody>
                  </Card>
                </Colx>
              </Row>
            </Colx>
            <Colx :md="4">
              <Card>
                <CardHeader>版本信息</CardHeader>
                <CardBody>
                  版本信息....
                </CardBody>
              </Card>
            </Colx>
          </Row>
        </div>
      </Content>
      <Footer></Footer>
    </Layout>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      progressValue: 0,
      tableColumns: [
        {
          title: "昵称",
          key: "nickname",
          width: 150
        },
        {
          title: "加入时间",
          key: "createTime",
          width: 220
        },
        {
          title: "签名1",
          key: "sign"
        }
      ],
      tableDatas: [
        {
          nickname: "贤心",
          createTime: "2017-11-11",
          sign: "人生就像是一场修行"
        },
        {
          nickname: "贤心1",
          createTime: "2017-11-11",
          sign: "人生就像是一场修行"
        },
        {
          nickname: "贤心2",
          createTime: "2017-11-11",
          sign: "人生就像是一场修行"
        }
      ]
    };
  },
  created() {
    if (this.intervalProgress) clearInterval(this.intervalProgress);
    this.loadProgress();
  },
  methods: {
    loadProgress() {
      this.intervalProgress = setInterval(() => {
        if (this.progressValue >= 100) {
          clearInterval(this.intervalProgress);
        }
        const rdm = getRandomInt(1, 5);
        this.progressValue =
          this.progressValue + rdm > 100 ? 100 : this.progressValue + rdm;
      }, 1000);

      const getRandomInt = (min, max) => {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min)) + min;
      };
    },
    onClick(e) {
      this.$layer.alert("xxx", { title: "我的标题啊", icon: 2 });
    },
    onNavbarClicked(elem) {
      console.log(elem);
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  /* -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px; */
}
</style>
